/**
 * 将每一新的gif帧绘制在之前的帧之上
 * 由于补丁（数据块）与原始gif的尺寸和位置不一致，需要偏移数据的位置
 */

const vertexShader = `
attribute vec2 position;

// 偏移补丁的变换矩阵
uniform mat3 world;

varying vec2 vUV;

void main(void) {
    // 选择将位置范围设定为0到1,简化矩阵计算,这样纹理坐标就能直接匹配
    vUV = position;

    // 转换至请求的补丁位置
    vec3 wPosition = vec3(position, 1) * world;

    // 将(0到1范围的坐标)转换为裁剪空间的-1到1范围坐标
    wPosition = wPosition * 2.0 - 1.0;

    // 指定位置(管线中深度功能已禁用)
    gl_Position = vec4(wPosition.xy, 0.0, 1.0);
}`;

const fragmentShader = `
varying vec2 vUV;

uniform sampler2D textureSampler;

uniform vec4 color;

uniform bool flipY;

void main(void) 
{
    // 直接显示纹素
    vec2 uv;
    if(flipY){
        uv = vec2(vUV.x, 1.0 - vUV.y);
    }else{
        uv = vUV;
    }
    vec4 finalColor = texture2D(textureSampler, uv) * color;

    //加上数据中定义的alpha测试,否则所有操作本可以通过texSubImage2d来处理
    if (color.a == 1. && finalColor.a == 0.) {
        discard;
    }

    gl_FragColor = finalColor;
}`;

/**
 * 效果所需的全部数据
 */
export const GifShaderConfiguration = {
    name: "Patch",
    vertexShader,
    fragmentShader,
    samplerNames: ["textureSampler"],
    uniformNames: ["world", "color", "flipY"],
}